/*
 * @Description: 下拉选择全宗
 * @Author: Zzt
 * @Date: 2022-11-10 16:09:49
 * @LastEditTime: 2023-02-27 09:31:01
 */
import { CaretDownFilled } from '@ant-design/icons';
import { fetchFondsListByUnitId } from '@/api/fonds';
import { IFond } from '@/interfaces/fond';
import { appState } from '@/store/mobx';
import { Button, Checkbox, Popover, Select } from 'antd';
import { observer } from 'mobx-react-lite';
import { memo, useEffect, useState } from 'react';
import { fetchATListByFondId } from '@/api/archivesType';
import { selectItemByKey } from '@/utils/list';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import styles from './style/nav.module.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

const Nav = (props: any) => {
  const { onChangeNav } = props;
  // 全宗列表
  const [fondsList, setFondsList] = useState([]);
  // 选中的全宗
  const [selectFondId, setSelectFondId] = useState(0);
  // 选中的档案类型
  const [selectATId, setSelectATId] = useState(0);
  // 档案类型列表
  const [ATList, setATList] = useState([]);
  /* 档案多选 */
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(ATList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  // 加载时获取全宗列表，获取成功后默认选中第一条并把第一条返回出去
  useEffect(() => {
    const { unitId } = appState;
    if (unitId) {
      fetchFondsListByUnitId(unitId).then((res) => {
        const _fondList: IFond[] = res.data;
        setFondsList(_fondList);
        setSelectFondId(_fondList[0].id);
      });
    }
  }, [appState.unitId]);
  useEffect(() => {
    if (selectFondId) {
      fetchATListByFondId(selectFondId).then((res) => {
        const { data } = res;
        setATList(
          data.map((item: any) => {
            return { label: item.atName, value: item.id };
          })
        );
        setSelectATId(data[0]?.id);
      });
    }
  }, [selectFondId]);
  // useEffect(() => {
  //   onChange({ fondId: selectFondId, atId: selectATId });
  // }, [selectATId]);
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleFondChange = (val: number) => {
    setSelectFondId(val);
  };
  /**
   * @description: 切换档案类型
   * @param {number} val 选中的档案类型
   */
  const handleATChange = (val: number) => {
    onChangeNav({ fondId: selectFondId, atId: selectATId });
    setSelectATId(val);
  };

  const onCheckAllChange = (event: CheckboxChangeEvent) => {
    onChangeNav(
      event.target.checked
        ? { fondsId: selectFondId, archiveTypeIds: ATList.map((item) => item.value) }
        : {}
    );
    setCheckedList(event.target.checked ? ATList.map((item) => item.value) : []);
    setIndeterminate(false);
    setCheckAll(event.target.checked);
  };

  const onChange = (list: CheckboxValueType[]) => {
    console.log('list', list);
    onChangeNav({ fondsId: selectFondId, archiveTypeIds: list });
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < ATList.length);
    setCheckAll(list.length === ATList.length);
  };
  const content = (
    <div className={cx('out-saw')}>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        全选
      </Checkbox>
      <CheckboxGroup
        options={ATList}
        value={checkedList}
        onChange={onChange}
        className={cx('out-saw')}
      />
    </div>
  );
  return (
    <>
      <p className={cx('out-p')}>全宗</p>
      <Select value={selectFondId} onChange={handleFondChange}>
        {fondsList.map((fond) => (
          <Option key={fond.id} value={fond.id}>
            {fond.fondName}
          </Option>
        ))}
      </Select>
      <Popover placement="bottom" content={content} trigger="click">
        <Button type="text">
          档案类型
          <CaretDownFilled />
        </Button>
      </Popover>
    </>
  );
};
export default memo(observer(Nav));
